<template>
  <!-- 自动滚动表格 -->
  <div v-if="autoScroll"
       class="auto-scroll-box">
    <arco-table class="vpt-table-header"
             :data="dataList"
             :loading="loading"
             :pagination="false"
             :bordered="{ headerCell: false }"
             :virtual-list-props="{ height: '100%' }"
             summary
             summary-text="全部">
      <template #columns>
        <template v-for="(item, index) in columns"
                  :key="index">
          <arco-table-column v-bind="$attrs"
                          v-if="item.children && item.children.length"
                          :title="item.title"
                          :cellClass="item.cellClass"
                          :render="item.render"
                          :summaryCell="item.summaryCell"
                          :header-cell-style="{
              width:
                typeof item.width === 'number' ? `${item.width}px` : item.width,
            }">
            <arco-table-column v-bind="$attrs"
                            v-for="(v, index1) in item.children"
                            :key="index1"
                            :title="v.title"
                            :render="item.render"
                            :summaryCell="item.summaryCell"
                            :data-index="v.dataIndex"
                            :cellClass="v.cellClass"
                            :align="v.align"
                            :header-cell-style="getCellStyle(v)">
            </arco-table-column>
          </arco-table-column>

          <arco-table-column v-else
                          v-bind="$attrs"
                          :title="item.title"
                          :data-index="item.dataIndex"
                          :cellClass="item.cellClass"
                          :render="item.render"
                          :summaryCell="item.summaryCell"
                          :align="item.align"
                          :header-cell-style="getCellStyle(item)">
          </arco-table-column>
        </template>
      </template>
      <template #summary-cell="{ record, column, rowIndex }">
        <slot name="summary-cell"
              :record="record"
              :column="column"
              :rowIndex="rowIndex">{{ record[column.dataIndex] }}</slot>
      </template>
    </arco-table>

    <Vue3SeamlessScroll :list="dataList"
                        class="seamless-scroll"
                        :step="0.5">
      <arco-table class="vpt-table-wrapper"
               :data="dataList"
               :loading="loading"
               :pagination="false"
               :bordered="{ headerCell: false }"
               :virtual-list-props="{ height: '100%' }">
        <template #columns>
          <template v-for="(item, index) in columns"
                    :key="index">
            <arco-table-column v-bind="$attrs"
                            v-if="item.children && item.children.length"
                            :title="item.title"
                            :render="item.render"
                            :summaryCell="item.summaryCell"
                            :cellClass="item.cellClass">
              <arco-table-column v-bind="$attrs"
                              v-for="(v, index1) in item.children"
                              :key="index1"
                              :title="v.title"
                              :render="item.render"
                              :summaryCell="item.summaryCell"
                              :data-index="v.dataIndex"
                              :cellClass="v.cellClass"
                              :align="v.align"
                              :cell-style="getCellStyle(v)">
                <template #cell="{ record, column, rowIndex }">
                  <slot name="cell"
                        :record="record"
                        :column="column"
                        :rowIndex="rowIndex">{{ record[column.dataIndex] }}</slot>
                </template>
              </arco-table-column>
            </arco-table-column>

            <arco-table-column v-else
                            v-bind="$attrs"
                            :title="item.title"
                            :width="item.width"
                            :data-index="item.dataIndex"
                            :render="item.render"
                            :summaryCell="item.summaryCell"
                            :cellClass="item.cellClass"
                            :align="item.align"
                            :cell-style="getCellStyle(item)">
              <template #cell="{ record, column, rowIndex }">
                <slot name="cell"
                      :record="record"
                      :column="column"
                      :rowIndex="rowIndex">{{ record[column.dataIndex] }}
                </slot>
              </template>
            </arco-table-column>
          </template>
        </template>
      </arco-table>
    </Vue3SeamlessScroll>
  </div>

  <template v-else>
    <arco-table class="vpt-table-wrapper"
             :columns="columns"
             :data="dataList"
             :loading="loading"
             :pagination="false"
             :scroll="scrollCache"
             :scrollbar="scrollbar">
      <!--       :bordered="{ headerCell: false }"  :virtual-list-props="{ height: '100%' }" -->
      <template #columns>
        <template v-for="(item, index) in columns"
                  :key="index">
          <arco-table-column v-if="item.children && item.children.length"
                          :title="item.title"
                          :width="item.width"
                          :data-index="item.dataIndex"
                          :render="item.render"
                          :summaryCell="item.summaryCell"
                          :cellClass="item.cellClass"
                          :align="item.align"
                          :cell-style="getCellStyle(item)">
            <arco-table-column v-bind="$attrs"
                            v-for="(v, index1) in item.children"
                            :key="index1"
                            :title="v.title"
                            :render="item.render"
                            :summaryCell="item.summaryCell"
                            :data-index="v.dataIndex"
                            :cellClass="v.cellClass"
                            :align="v.align"
                            :header-cell-style="getCellStyle(v)">
              <template #cell="{ record, column, rowIndex }">
                <slot name="cell"
                      :record="record"
                      :column="column"
                      :rowIndex="rowIndex">{{ record[column.dataIndex] }}
                </slot>
              </template>
            </arco-table-column>

            <!-- <template #optional="{ record }">
              <arco-button
                @click="$modal.info({ title: 'Name', content: record.name })"
                >view</arco-button
              >
            </template> -->
          </arco-table-column>
          <arco-table-column v-else
                          :title="item.title"
                          :width="item.width"
                          :data-index="item.dataIndex"
                          :render="item.render"
                          :summaryCell="item.summaryCell"
                          :cellClass="item.cellClass"
                          :align="item.align"
                          :cell-style="getCellStyle(item)">
            <template #cell="{ record, column, rowIndex }">
              <slot name="cell"
                    :record="record"
                    :column="column"
                    :rowIndex="rowIndex">{{ record[column.dataIndex] }}
              </slot>
            </template>
            <!-- <template #optional="{ record }">
              <arco-button
                @click="$modal.info({ title: 'Name', content: record.name })"
                >view</arco-button
              >
            </template> -->
          </arco-table-column>
        </template>
      </template>
    </arco-table>
  </template>

  <vptpagination v-if="showPagination"
                 :pageIndex="pageIndex"
                 :pageTotal="pageTotal"
                 @onChangePage="onChangePage"
                 :pageStyle="pageStyle"></vptpagination>
</template>
<script setup>
import { computed, watch } from "vue";
import vptpagination from "../vpt-base-pagination-1001/index.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

const props = defineProps({
  scrollbar: {
    type: Boolean,
    default: false,
  },
  showPagination: { type: Boolean, default: true },
  loading: { type: Boolean, default: false },
  dataList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  columns: {
    type: Array,
    default: () => {
      return [];
    },
  },
  //总页数
  pageTotal: {
    type: Number,
    default: () => {
      return 0;
    },
  },
  //当前页
  pageIndex: {
    type: Number,
    default: () => {
      return 1;
    },
  },

  scroll: {
    type: Object,
    default: () => {
      return { x: 0, y: 0 };
    },
  },
  pageStyle: {
    type: Object,
    default: () => {
      return {
        paddingTop: "0.3rem",
      };
    },
  },
  autoScroll: { type: Boolean, default: false },
});

watch(
  () => props.dataList,
  () => { },
  { deep: true }
);

const scrollCache = computed(() => {
  if (props.scroll.x == 0 && props.scroll.y == 0) {
    return null;
  } else
    return {
      x: props.scroll.x,
      y: props.scroll.y,
    };
});

// const emit = defineEmits(["onChangePageNumber"]);

//切换分页
const onChangePage = (value) => {
  // emit("onChangePageNumber", value);
};

const getCellStyle = (item) => {
  const { width } = item;
  if (typeof width === "number") {
    return {
      width: `${width}px`,
    };
  }
  return {
    width,
  };
};

// defineExpose({
//     onShowModal
// })
</script>
<style lang="less" scoped>
@import url("../../assets/style/table.less");

:deep(.seamless-scroll) {
  flex: 1;
  overflow: hidden;

  .arco-table-container {
    border-top: 1px solid transparent !important;
    // border-bottom: 1px solid rgba(22, 59, 104, 0.5) !important;
  }
}

.auto-scroll-box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .vpt-table-header {
    :deep(.arco-table-tfoot) {
      box-shadow: none;
    }

    :deep(.arco-table-body) {
      display: none;
    }
  }

  .vpt-table-wrapper {
    :deep(.arco-table-header) {
      display: none;
    }
  }
}
</style>
